<template>
    <div id="car">
        <ul>
            <li v-for="item of carts" :key="item.id">
              产品名称:{{item.title}}==产品价格:{{item.price}}==添加数量:{{item.count}}==<button @click="handlereduce(item)" :disabled="item.count===0">减少</button>
            </li>
        </ul>
         <h1>{{SETCARPRICE}}</h1>
    </div>
</template>

<script>
import { mapState,mapActions,mapGetters } from 'vuex';
export default {
    data(){
        return{
            total:"20"
        }
    },
   computed:{
    //接受一下car模块的carts
    ...mapState('car',["carts"]),
    //引入总计
    ...mapGetters("car",["SETCARPRICE"])
   },
   methods:{
    //定义购物车减少函数
    //点击时减少carts中count的属性
    //增加product中的库存属性
    handlereduce(item){
         //也来触发action操作库存
         //声明减少函数
         this.REMOVE_CAR(item)

    },
     //来自car模块的REMOVE_CAR
     ...mapActions('car',['REMOVE_CAR'])
   }
}
</script>

<style>

</style>